<template>
  <view class="page custom-page">
    <custom-head gradient back title="添加礼品"></custom-head>
    <view class="giftSend">
      <view class="content">
        <view class="item1 flex a-center">
          <view class="label">礼品名称</view>
          <view class="value count">
            <u-input
              placeholder="请输入礼品名称"
              input-align="left"
              v-model="form.name"
              placeholderStyle="color: #303133;"
            />
          </view>
        </view>

        <view class="item1 flex a-center">
          <view class="label">宝箱主图图片</view>
          <u-upload
            :file-list="fileList"
            :form-data="{ type: 'avatar' }"
            :header="{ Authorization: token }"
            :action="BASE_URL + '/file/upload'"
            width="104rpx"
            height="104rpx"
            maxCount="1"
            @on-change="onSuccess"
            @on-remove="omRemove"
          >
            <view
              slot="addBtn"
              class="slot-btn upload_box"
              hover-class="slot-btn__hover"
              hover-stay-time="150"
            >
              <view>+</view>
              <view>上传照片</view>
            </view>
          </u-upload>
        </view>

        <view class="item1 flex a-center">
          <view class="label">详情介绍</view>
          <u-input
            type="textarea"
            :height="100"
            :auto-height="true"
            :border="true"
            v-model="form.desc"
            placeholderStyle="color: #303133;"
          />
        </view>

        <view class="item1 flex a-center">
          <view class="label">库存</view>
          <view class="value count">
            <u-input
              type="number"
              input-align="left"
              placeholder="0"
              v-model="form.stock"
              placeholderStyle="color: #303133;"
            />
          </view>
        </view>

        <view class="item1 flex a-center">
          <view class="label">单位</view>
          <view class="value count">
            <u-input
              input-align="left"
              placeholder="请输入单位 (例如: 套)"
              placeholderStyle="color: #303133;"
              v-model="form.unit"
            />
          </view>
        </view>

        <view class="item1 flex a-center">
          <view class="label">积分单价</view>
          <view class="value count">
            <u-input
              type="number"
              input-align="left"
              placeholder="0"
              placeholderStyle="color: #303133;"
              v-model="form.price_score"
            />
          </view>
        </view>

        <view class="item1 flex a-center switch">
          <view class="label">礼品上架</view>
          <u-switch v-model="form.status"></u-switch>
        </view>
      </view>

      <view class="button submit" @click="submit">保存</view>
    </view>

    <!-- <u-popup v-model="giftShow" closeable mode="bottom">
			<view class="selectGiftBody flex wrap">
				<view class="item" v-for="i in 6" :class="{'on':giftIndex==i}" @tap="giftIndex = i">
					<view class="tag">24</view>
					<view class="image"><image src="../../static/uni.png" mode="widthFix" /></view>
					<view class="text">
						<h4>塔克飞机积木</h4>
						<p>积分：2000</p>
					</view>
				</view>
			</view>
			<view class="button submit" style="margin-top: 20rpx; border-radius: 10rpx; wid" @tap="giftShow = false">确定</view>
		</u-popup>
		<u-popup v-model="userShow" closeable mode="bottom">
			<view class="selectUserBody flex wrap">
				<view class="item" v-for="i in 8" :class="{'on':userIndex==i}" @tap="userIndex = i">
					<view class="touxiang"><image src="../../static/img/avatar.png" mode="widthFix" /></view>
					<view class="jifen">0</view>
					<view class="username">李丽丽</view>
				</view>
			</view>
			<view class="button submit" style="margin-top: 20rpx; border-radius: 10rpx; wid" @tap="userShow = false">确定</view>
		</u-popup> -->
  </view>
</template>

<script>
import { BASE_URL } from '../../api/config';
import { addPresent, getPresentDetail, updatePresent } from '../../api/modules/present';

export default {
  data() {
    return {
      form: {
        name: '', // 礼物名称
        avatar: '', // 宝箱主图
        desc: '', // 详情介绍
        stock: '', // 库存
        unit: '', // 单位
        price_score: '', // 积分单位
        status: false, // 礼品上架
      },

      BASE_URL,
      token: uni.getStorageSync('token'),
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
      fileList: [],
      urlId: '',
    };
  },
  onLoad(parma) {
    const { id } = parma || {}
    console.log('parma', parma)
    this.urlId = id;
    id && this._getPresentDetail(id)
  },
  methods: {
    omRemove(index) { // 移除照片
			if (index === 0) {
				this.fileList = []
				this.form.avatar = ''
			}
		},
    onSuccess(data) { // 图片上传
      const res = JSON.parse(data.data)
      if (res.code == 201) {
        this.form.avatar = res.data.path
      } else {
        this.$refs.uUpload.clear()
        this.$u.toast('上传失败')
      }
    },

    submit() {
      let param = {
        ...this.form,
        sid: this.glbId,
        status: this.form.status ? 1 : 0
      }
      if (this.urlId) {
        this._updatePresent(this.urlId, param)
      } else {
        this._addPresent(param)
      }
      console.log(param);
      
    },

    _updatePresent(id, data) {
      updatePresent(id, data).then(res => {
        const { code } = res || {}
        if (code === 200) {
          this.$u.toast('修改成功')
            uni.navigateBack({
              delta: 1,
            });
        }
      })
    },

    _addPresent(param) { // 保存
      addPresent(param).then(res => {
        const { code } = res || {}
        if ( code === 201 ) {
          this.$u.toast('添加成功')
            uni.navigateBack({
              delta: 1,
            });
        }
        
      })
    },
    _getPresentDetail(id) { // 详情
      getPresentDetail(id).then(res => {
        const { code, data } = res || {}
        if (code === 200) {
          // this.form = data.map(i => ({...i, avatar: `${this.static_uri}${i.avatar}`}))
          this.form = {
            ...data,
            status: 1 ? true : false
          }
          this.fileList = [{url:  `${this.static_uri}${data.avatar}`}]
          console.log('res 详情', res, '---', this.form)
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
page {
  height: 100%;
  background-color: #fff;
}
.giftSend {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 60rpx 35rpx;
}
.item1 {
  margin-bottom: 30rpx;
}
.label {
  width: 200rpx;
  font-size: 30rpx;
  line-height: 80rpx;
  white-space: nowrap;
}
.value {
  border: 1px solid #f0f0f0;
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
}
.count {
  text-align: right;
}
.value input {
  text-align: right;
  width: 100%;
  height: 100%;
}
.button {
  width: 686rpx;
  height: 88rpx;
  border-radius: 44rpx;
  /* margin: 80rpx 0 40rpx 0; */
  background-color: #2979ff;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  line-height: 88rpx;
  /* margin: auto;
  margin-top: 50rpx; */
}
.selectGiftBody {
  width: 100%;
  padding: 10rpx;
  padding-left: 0;
  padding-top: 50px;
  .item {
    width: 234rpx;
    height: 274rpx;
    position: relative;
    background: #f4f4f4;
    border: 1px solid #f4f4f4;
    border-radius: 10rpx;
    margin-left: 10rpx;
    margin-top: 10rpx;
    padding: 10rpx;
  }
  .item.on {
    border: 1px solid #2979ff;
    background-color: #eaf4ff;
  }
  .image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 10px;
    overflow: hidden;
    margin: 10rpx auto;
  }
  .text {
    font-size: 24rpx;
    color: #f84638;
    text-align: center;
  }
  .text h4 {
    font-size: 28rpx;
    color: #303133;
  }
  .tag {
    width: 42rpx;
    font-size: 24rpx;
    text-align: center;
    line-height: 42rpx;
    color: #fff;
    position: absolute;
    right: -5rpx;
    top: -5rpx;
    background-color: #f84638;
    border-radius: 50%;
  }
}
.selectUserBody {
  width: 100%;
  padding: 8rpx;
  padding-left: 6rpx;
  padding-top: 50px;
  .item {
    width: 180rpx;
    padding-bottom: 17rpx;
    background: #f4f4f4;
    border: 1px solid #f4f4f4;
    border-radius: 8rpx;
    margin-left: 4rpx;
    margin-bottom: 5rpx;
  }
  .item.on {
    border: 1px solid #2979ff;
    background-color: #eaf4ff;
  }
}
.touxiang {
  width: 120rpx !important;
  height: 120rpx !important;
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
  margin-top: 17rpx;
}
.jifen {
  color: #f93534;
  font-size: 24rpx;
  text-align: center;
}
.username {
  text-align: center;
  font-size: 26rpx;
}

.u-list-item .u-preview-wrap {
  width: 140rpx !important;
  height: 140rpx !important;
}
.upload_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  width: 104rpx;
  height: 104rpx;
  font-size: 25rpx;
  background: #f8f8f8;
}
.switch {
  display: flex;
  justify-content: space-between;
}
</style>
